<template>
  <!-- 走马灯 -->
  <el-carousel
    :interval="2000"
    type="card"
    trigger="click"
    height="300px"
    motion-blur
  >
    <el-carousel-item v-for="item in 6" :key="item"> </el-carousel-item>
  </el-carousel>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="未拒绝" name="first">
      <!-- 稿件管理 -->
      <h3 style="margin-bottom: 20px; margin-left: 20px">拒绝稿件管理</h3>
      <!-- 搜索栏 -->
      <nav>
        <!-- 稿件搜索栏 -->
        <div class="periodical-search">
          <el-input
            v-model="periodicalSearch"
            style="width: 240px"
            placeholder="搜索稿件名"
          /><el-button type="primary" plain style="margin-left: 10px"
            >搜索</el-button
          >
        </div>
        <!-- 出版社搜索栏 -->
        <div class="publishing-house">
          <el-input
            v-model="publishingHouseSearch"
            style="width: 240px"
            placeholder="搜索出版社名"
          /><el-button type="success" plain style="margin-left: 10px"
            >搜索</el-button
          >
        </div>
        <!-- 主编搜索栏 -->

        <div class="editor-in-chief">
          <el-input
            v-model="editorInChiefSearch"
            style="width: 240px"
            placeholder="搜索主编名"
          /><el-button type="info" plain style="margin-left: 10px"
            >搜索</el-button
          >
        </div>
      </nav>
      <el-table :data="notRemovedData" stripe style="width: 100%" fit>
        <el-table-column type="index" width="50" align="center" />
        <el-table-column prop="name" label="稿件名" align="center" />
        <el-table-column prop="number" label="稿件编号" align="center" />
        <el-table-column
          prop="author"
          label="作者"
          width="280"
          align="center"
        />
        <el-table-column
          prop="periodical"
          label="所属期刊"
          width="280"
          align="center"
        />
        <el-table-column label="操作" align="center"
          ><template #default="{ row }">
            <el-button type="danger" @click="removePeriodical(row)"
              >拒绝</el-button
            ></template
          ></el-table-column
        > </el-table
      ><el-pagination background layout="prev, pager, next" :total="1000" />
    </el-tab-pane>
    <el-tab-pane label="已拒绝" name="second">
      <!-- 稿件管理 -->
      <h3 style="margin-bottom: 20px; margin-left: 20px">拒绝稿件作品</h3>
      <!-- 搜索栏 -->
      <nav>
        <!-- 稿件搜索栏 -->
        <div class="periodical-search">
          <el-input
            v-model="periodicalSearch"
            style="width: 240px"
            placeholder="搜索稿件名"
          /><el-button type="primary" plain style="margin-left: 10px"
            >搜索</el-button
          >
        </div>
        <!-- 出版社搜索栏 -->
        <div class="publishing-house">
          <el-input
            v-model="publishingHouseSearch"
            style="width: 240px"
            placeholder="搜索出版社名"
          /><el-button type="success" plain style="margin-left: 10px"
            >搜索</el-button
          >
        </div>
        <!-- 主编搜索栏 -->

        <div class="editor-in-chief">
          <el-input
            v-model="editorInChiefSearch"
            style="width: 240px"
            placeholder="搜索主编名"
          /><el-button type="info" plain style="margin-left: 10px"
            >搜索</el-button
          >
        </div>
      </nav>
      <el-table :data="removedData" stripe style="width: 100%" fit>
        <el-table-column type="index" width="50" align="center" />
        <el-table-column prop="name" label="稿件名" align="center" />

        <el-table-column prop="publishingUnit" label="出版社" align="center" />

        <el-table-column prop="editorInChief" label="主编" align="center" />
        <el-table-column
          prop="foundingDate"
          label="创刊日期"
          align="center"
        /><el-table-column
          prop="publicationDate"
          label="出刊日期"
          align="center"
        />
        <el-table-column label="操作" align="center"
          ><template #default="{ row }">
            <el-button type="success" @click="removePeriodical(row)"
              >重新上架</el-button
            ></template
          ></el-table-column
        > </el-table
      ><el-pagination background layout="prev, pager, next" :total="1000" />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { ref } from "vue";
const activeName = ref("first");

// 稿件搜索数据
const periodicalSearch = ref("");
// 出版社搜索
const publishingHouseSearch = ref("");
// 主编搜索栏
const editorInChiefSearch = ref("");
// 未拒绝稿件数据列表
// 表格操作
const notRemovedData = [
  {
    id: "1",
    name: "基于SpringCloud的“芸窗”期刊采编系统",
    number: "CQD",
    author: "陈启迪",
    periodical: "计算机技术",
    keyWords: "期刊采编；敏感词识别；3D看稿",
  },
  {
    id: "2",
    name: "环境治理系统设计",
    number: "ZLM",
    author: "郑丽敏",
    periodical: "环境工程",
    keyWords: "环境治理；环境治理系统；环境治理系统设计",
  },
];
// 已拒绝稿件数据列表
const removedData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style scoped>
/* 走马灯样式 */
.el-carousel__item:nth-child(3n) {
  background-image: url("@/assets/images/1.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.el-carousel__item:nth-child(3n + 1) {
  background-image: url("@/assets/images/2.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.el-carousel__item:nth-child(3n + 2) {
  background-image: url("@/assets/images/3.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* tab标签页修饰 */
.el-tab-pane {
  color: var(--jiqiu-color);
}
.el-tabs__item,
.el-tabs__item:hover,
::v-deep(.el-tabs__item),
::v-deep(.el-tabs__item:hover),
::v-deep(.el-tabs__item) {
  color: var(--jiqiu-color);
}
::v-deep(.el-tabs__item.is-active) {
  color: #1a3b32;
}
.el-tabs__active-bar {
  background-color: var(--jiqiu-color);
}
::v-deep(.el-tabs__active-bar) {
  background: var(--jiqiu-color);
}

nav {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子盒子在主轴上均匀分布 */
  align-items: center; /* 子盒子在交叉轴上居中对齐 */
  width: 100%; /* 父盒子的宽度 */
  box-sizing: border-box; /* 确保内边距包含在宽度内 */
}

.periodical-search,
.publishing-house,
.editor-in-chief {
  width: 30%; /* 每个子盒子的宽度 */
  height: 100px; /* 每个子盒子的高度 */

  box-sizing: border-box; /* 确保边框包含在宽度内 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 子盒子内容在主轴上居中对齐 */
  align-items: center; /* 子盒子内容在交叉轴上居中对齐 */
}

/* el-input表单修饰 */
::v-deep(.el-input__wrapper) {
  width: 250px;
  height: 35px;
  border: #d1d9e6 1px solid;
}
::v-deep(.el-input__wrapper.is-focus) {
  box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}
.el-button {
  border-radius: 6px;
}
</style>
